import React, { useState } from 'react';
import {Card, Badge, Row, Col, List} from 'antd';
import {
    BellOutlined,
    PlusOutlined,
    SearchOutlined,
    FileImageOutlined
} from '@ant-design/icons';
import InfiniteScroll from 'react-infinite-scroller';
import '../style.css';
import ProAvatar from "../component/ProAvatar";
import RightClickMenu from "./component/RightClickMenu";

let mockContact: any = [];

for (let i = 0; i < 9; i++) {
    if(i === 5){
        mockContact.push({
            id: i,
            name: `Edward King ${i}`,
            howTimeAgo: '',
            tips: `[16 Messages] Welcome to our message`,
            message: 5,
            mute: true,
            group: 1,
        })
    } else if( i === 7) {
        mockContact.push({
            id: i,
            name: `Edward King ${i}`,
            howTimeAgo: '',
            tips: `[16 Messages] Welcome to our message`,
            message: 7,
            mute: false,

        })
    }else if( i === 6) {
        mockContact.push({
            id: i,
            name: `Edward King ${i}`,
            howTimeAgo: '',
            tips: `[16 Messages] Welcome to our message`,
            message: 0,
            mute: true
        })
    } else {
        mockContact.push({
            id: i,
            name: `Edward King ${i}`,
            howTimeAgo: '',
            tips: `[16 Messages] Welcome to our message`,
            message: 0,
            mute:false,
            group: 0,
        })
    }
}
const WeContacts = (props: any) => {
    const { contactsRightClick } = props;
    const [data, setData]= useState(mockContact);
    const [loading] = useState<boolean>(false);
    const [hasMore] = useState<boolean>(true);
    const handleInfiniteOnLoad = () => {
        console.log('分页加载');
    };
    const handleContactsClick = (id: number) => {
        console.log('单击打开聊天窗口',id);
        let tempData = [...data];
        // tempData.splice(id, 1);
        tempData[id].message = 0;
        tempData[id].mute = false;
        setData(tempData);
    };
    // 渲染提示标签
    const renderTipsIcon = (object: any) => {
        let { message,  mute} = object;
        if(message && mute){
            return(
                <div className="towTipsIcon">
                    <BellOutlined />
                    <Badge dot />
                </div>
            )
        } else if (message && !mute) {
            return <div className="tipsIcon"><Badge size="small" count={message} /></div> ;
        } else if(message === 0 && !mute){
            return null;
        } else if(message === 0 && mute){
            return <div className="tipsIcon"><BellOutlined /></div> ;
        }
    };
    // 渲染右键菜单
    const renderContactAvatarTools = () => {
        return(
            <div className='WeChatContactsAvatarTools' >
                <div className='items'>
                    <div>
                        <FileImageOutlined />
                    </div>
                    <div>
                        Mark as unread
                    </div>
                </div>
                <div className='items'>
                    <div>
                        <FileImageOutlined />
                    </div>
                    <div>
                        Mute Notifications
                    </div>
                </div>
                <div className='items'>
                    <div>
                        <FileImageOutlined />
                    </div>
                    <div>
                       Remove
                    </div>
                </div>
                <div className='items'>
                    <div>
                        <FileImageOutlined />
                    </div>
                    <div>
                        Clear Chat History
                    </div>
                </div>
            </div>
        )
    };
    // 渲染列表
    const renderProList = () => {
        return (
            <InfiniteScroll
                initialLoad={false}
                pageStart={0}
                loadMore={handleInfiniteOnLoad}
                hasMore={!loading && hasMore}
                useWindow={false}
            >
                <List
                    split={false}
                    bordered={false}
                    dataSource={data}
                    renderItem={(item: any, index: number) => (
                        <div
                            className={contactsRightClick.id === item.id ? 'WeChatContactsItemBox WeChatContactsItemBoxActive' : 'WeChatContactsItemBox'}
                            key={item.id}
                            data-id={item.id}
                            data-group={item.group}
                            onClick={() => {handleContactsClick(item.id)}}
                        >
                            {
                                contactsRightClick.id === item.id && <RightClickMenu contactsRightClick={contactsRightClick}/>
                            }
                            <Row className="WeChatContactsItem">
                                <Col span={21}>
                                    <ProAvatar item={item}/>
                                </Col>
                                <Col span={3}>
                                    <div className="howTimeAgoAndTipsIcon">
                                        <div className="howTimeAgo">Just</div>
                                        {
                                            renderTipsIcon(item)
                                        }
                                    </div>
                                </Col>
                            </Row>
                        </div>
                    )}
                />
            </InfiniteScroll>
        )
    };
    return (
        <Card
            type='inner'
            style={{
                width: '100%',
                boxShadow: 'none',
            }}
            bodyStyle={{
                padding: 0,
                overflowX: 'hidden',
                overflowY: 'auto',
                height: 'calc(100vh - 66px)'
            }}
        >
            <div className="WeChatContactsHeader">
                <div className="title">Chat</div>
                <div className="iconBox">
                    <SearchOutlined/>
                    <PlusOutlined className="add"/>
                </div>
            </div>
            {
                renderProList()
            }
        </Card>
    )
};

export default React.memo(WeContacts);
